<template>
  <div v-if="modelValue && preview">
    <el-image
      v-if="typeof modelValue === 'string'"
      :src="modelValue"
      fit="cover"
      class="w-[100px] h-[100px] rounded border mr-2 mt-3"
    />

    <div v-else class="flex flex-wrap">
      <div
        class="relative mx-1 mb-2 w-[100px] h-[100px]"
        v-for="(url, index) in modelValue"
        :key="index"
      >
        <el-icon
          class="absolute right-[5px] top-[10px] cursor-pointer bg-white rounded-full"
          style="z-index: 10"
          @click="removeImage(url)"
        >
          <CircleClose />
        </el-icon>

        <el-image
          :src="url"
          fit="cover"
          class="w-[100px] h-[100px] rounded border mr-2 mt-1"
        />
      </div>
    </div>
  </div>

  <div v-if="preview" class="choose-image-btn" @click="open">
    <el-icon :size="25" class="text-gray-500">
      <Plus />
    </el-icon>
  </div>

  <el-dialog title="选择图片" v-model="dialogVisible" width="80%" top="5vh">
    <el-container class="bg-white round" style="height: 70vh">
      <el-header class="image-header">
        <el-button type="primary" size="small" @click="handleOpenCreate">
          新增图片分类
        </el-button>

        <el-button type="warning" size="small" @click="handleOpenUpload">
          上传图片
        </el-button>
      </el-header>

      <el-container>
        <image-aside ref="imageAsideRef" @change="handleChange" />
        <image-main
          :limit="limit"
          ref="imageMainRef"
          @choose="handleChoose"
          openChoose
        />
      </el-container>
    </el-container>

    <span slot="footer" class="flex justify-end">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script setup>
  import { ref } from 'vue'
  import ImageAside from '@/pages/image/components/ImageAside.vue'
  import ImageMain from '@/pages/image/components/ImageMain.vue'
  import { toast } from '@/utils'

  const props = defineProps({
    modelValue: [String, Array],
    limit: {
      type: Number,
      default: 1,
    },
    preview: {
      type: Boolean,
      default: true,
    },
  })
  const emit = defineEmits(['update:modelValue', 'upImgSuc'])
  const dialogVisible = ref(false)

  const imageAsideRef = ref(null)
  const handleOpenCreate = () => imageAsideRef.value.handleCreate()
  const handleChange = (activeId) => imageMainRef.value.loadData(activeId)

  const imageMainRef = ref(null)
  const handleOpenUpload = () => imageMainRef.value.openUploadFile()

  let urls = []
  function handleChoose(e) {
    urls = e.map((o) => o.url)
  }

  const close = () => {
    dialogVisible.value = false
  }

  let callbackFunction = ref(null)
  function open(cb = null) {
    console.log(cb)
    dialogVisible.value = true
    callbackFunction.value = cb
  }

  function submit() {
    let value = []
    if (props.limit === 1) {
      value = urls[0]
    } else {
      value = props.preview ? [...props.modelValue, ...urls] : [...urls]
      if (value.length - urls.length - 1 > props.limit) {
        let limit = props.preview
          ? props.limit - props.modelValue.length
          : props.limit
        return toast('最多还能选择' + limit + '')
      }
    }
    if (value && props.preview) {
      emit('update:modelValue', value)
    }

    if (!props.preview && typeof callbackFunction.value === 'function') {
      callbackFunction.value(value)
    }
    emit('upImgSuc')
    close()
  }

  // 移除轮播图
  function removeImage(url) {
    emit(
      'update:modelValue',
      props.modelValue.filter((u) => u !== url)
    )
  }

  defineExpose({
    open,
  })
</script>

<style scoped>
  .choose-image-btn {
    @apply w-[100px] h-[100px] rounded border flex items-center justify-center cursor-pointer hover:(bg-gray-100);
  }
</style>
